
var colorArr = ["#5470C6", "#91CC75", "#FAC858", "#EE6666", "#73C0DE"];

// 用户ID
let id = getUrlParam("id");
$(function () {
    GetUserRole();
});
//获取用户权限
function GetUserRole() {
    // let thisdata = [];
    // thisdata.push(InitRole(id));
    let USERdata = InitRole(id);
    if (USERdata != null) {
        initTitle();

    }
    else OpenErrmsg("../../web/errhtml/404.html");
}
function initTitle() {
    //后台返回数据
    let dataType = [
        { "code": "01", "name": "东侧液管", "checked": true },
        { "code": "02", "name": "西侧液管", "checked": true },
        { "code": "03", "name": "外侧液管", "checked": true },
        { "code": "04", "name": "液管1", "checked": false },
        { "code": "05", "name": "液管2", "checked": false },
        { "code": "06", "name": "液管3", "checked": false },
        { "code": "07", "name": "液管4", "checked": false },
        { "code": "08", "name": "液管5", "checked": false },
    ];
    var str = "";
    for (var i = 0; i < dataType.length; i++) {
        var item = dataType[i];
        //easyUI自带CheckBox样式  两种方法都能实现，easyUI的字体太大
        // str = "<checkbox  name=\"dataType\" data-options=\"labelPosition:'after',onChange:choose,"
        //     + (item.checked ? "checked:true" : "checked:false")
        //     + "\"  class=\"easyui-checkbox\"" +
        //     " id=\"ck_" + item.code
        //     + "\" value=\"" + item.code
        //     + "\" label=\"" + item.name + "\" "
        //     + "></checkbox>"
        // let targetObj = $(str).appendTo("#titlediv");
        // $.parser.parse(targetObj);
        // $.parser.parse("#ck_" + item.code);
        // $.parser.parse("#titlediv");

        //原生CheckBox样式
        str = '<input  style="font-size: 14px;margin-left:4px" type="checkbox" name="dataType" onclick="choose2()"'
            + (item.checked ? "checked='checked'" : "")
            + ' value="' + item.code
            + '" id="ck_' + item.code
            + '" /><label style="font-size: 14px;margin-right:5px" for="ck_' + item.code
            + '">' + item.name + '</label>'
        let targetObj = $(str).appendTo("#titlediv");
    }
    choose();
}
function choose2() {
    // res就是复选框中 所有的选中值
    var res = [];
    var checkCount = 0;
    $('#titlediv').find("input[name='dataType']").each(function (index, obj) {
        if ($(this).get(0).checked) {
            //  选中复选框中的值
            res.push($(this).val());
            checkCount = checkCount + 1;
        }
    });
    var Codes = res.join(',');//将数组中的元素“，”连接起来
    if (checkCount >= 5) {
        $('#titlediv').find("input[name='dataType']").each(function (index, obj) {
            if (!$(this).get(0).checked) {
                $(this).attr('disabled', true);
            }
        });
    } else {
        $('#titlediv').find("input[name='dataType']").each(function (index, obj) {
            if (!$(this).get(0).checked) {
                $(this).attr('disabled', false);
            }
        });
    }
    console.log(Codes)
    InitChart(Codes);

}
function InitChart(TypeCodes) {

    let xAxis = ["12:00", "12:15", "12:30", "12:45", "13:00"];
    let data = [
        { "code": "01", "name": "东侧液管", "data": ["34", "617", "53", "54", "32"] },
        { "code": "02", "name": "西侧液管", "data": ["345", "167", "253", "564", "232"] },
        { "code": "03", "name": "外侧液管", "data": ["124", "671", "573", "504", "132"] },
        { "code": "04", "name": "液管1", "data": ["234", "567", "534", "594", "320"] }
    ];

    var myChart = echarts.init(document.getElementById('chartdiv'));
    var xAxisDataLine = new Array();
    var seriesDataLine = new Array();
    for (var i = 0; i < data.length; i++) {
        var item = data[i];
        xAxisDataLine.push(item.name)
        seriesDataLine.push({
            name: item.name,
            type: "line",
            // stack: 'Total',
            data: item.data
        });
    }
    console.log(xAxisDataLine)
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: xAxisDataLine,

        },
        color:colorArr,
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            // feature: {
            //     saveAsImage: {}
            // }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis
        },
        yAxis: {
            type: 'value'
        },
        series: seriesDataLine
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // //每日装船数
    // $.ajax({
    //     type: "POST",
    //     url: 'DataDriver.ashx?method=mrzc&random=' + GetRandomNum(1, 1000),
    //     async: true, cache: false,
    //     data: {},
    //     dataType: "json",
    //     success: function (data) {

    //         var xAxisDataLine = new Array();
    //         var seriesDataLine = new Array();
    //         for (var i = 0; i < data.length; i++) {
    //             var item = data[i];
    //             xAxisDataLine.push(item.date)
    //             seriesDataLine.push(item.num);
    //         }
    //         // 指定图表的配置项和数据
    //         var option = {
    //             title: {
    //                 text: "每日装船数",
    //                 textStyle: {
    //                     color: '#54cad8',
    //                     fontSize: "30px",
    //                     fontWeight: "bold"
    //                 },
    //                 top: "10px;",
    //                 left: "20px;"
    //             },
    //             tooltip: {},
    //             legend: {
    //                 data: ['销量'],
    //                 color: "#fff"
    //             },

    //             xAxis: {
    //                 data: xAxisDataLine,
    //                 axisLine: {
    //                     lineStyle: {
    //                         color: '#113d5e',
    //                         width: 1, //这里是为了突出显示加上的
    //                     }
    //                 },
    //                 axisLabel: {
    //                     show: true,
    //                     textStyle: {
    //                         color: '#6782a0'
    //                     }
    //                 }

    //             },
    //             yAxis: {
    //                 axisLine: {
    //                     lineStyle: {
    //                         color: '#113d5e',
    //                         width: 1, //这里是为了突出显示加上的
    //                     }
    //                 },
    //                 splitLine: {
    //                     show: true,
    //                     lineStyle: {
    //                         type: 'solid',
    //                         color: '#113d5e'
    //                     }
    //                 },
    //                 axisLabel: {
    //                     show: true,
    //                     textStyle: {
    //                         color: '#6782a0'
    //                     }
    //                 }

    //             },
    //             color: ["#01d6ff"],
    //             series: [{
    //                 type: 'bar',
    //                 data: seriesDataLine
    //             }]
    //         };
    //         // 使用刚指定的配置项和数据显示图表。
    //         myChart.setOption(option);


    //     }
    // });
}
function choose() {
    // res就是复选框中 所有的选中值
    var res = [];
    var checkCount = 0;
    $('#titlediv').find("checkbox[checkboxname='dataType']").each(function (index, obj) {
        if ($(obj).checkbox('options').checked) {
            //  选中复选框中的值
            res.push($(obj).attr('value'));
            checkCount = checkCount + 1;
        }
    });
    var Codes = res.join(',');//将数组中的元素“，”连接起来
    if (checkCount >= 5) {
        $('#titlediv').find("checkbox[checkboxname='dataType']").each(function (index, obj) {
            if (!$(obj).checkbox('options').checked) {
                $(obj).checkbox('disable');
            }
        });
    } else {
        $('#titlediv').find("checkbox[checkboxname='dataType']").each(function (index, obj) {
            if (!$(obj).checkbox('options').checked) {
                $(obj).checkbox('enable');
            }
        });
    }
    console.log(Codes)
    InitChart(Codes);

}